<template>
  <el-row :gutter="20">
    <el-col :span="3">
      <el-menu
        default-active="3"
        class="el-menu-vertical-demo"
       
        background-color="#FFFFFF"
        text-color="#000000"
        active-text-color="#FF0000"
      >
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">
            <router-link :to="{name: 'Vip'}" >会员中心</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">
              <router-link :to="{name: 'Cookbook'}" >菜谱</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-menu"></i>
          <span slot="title">
              <router-link :to="{name: 'Topics'}" >话题</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-menu"></i>
          <span slot="title">
              <router-link :to="{name: 'Log'}" >日志</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">
              <router-link :to="{name: 'Menu'}" >菜单</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-setting"></i>
          <span slot="title">
              <router-link :to="{name: 'Collect'}" >收藏</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-setting"></i>
          <span slot="title">
              <router-link :to="{name: 'Setting'}" >账户设置</router-link>
          </span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="14">
      <div>
        <font size="4">
          <i class="el-icon-back"></i>
        </font>
        <span style="margin-left:10px">
          <font size="4">发布新话题</font>
        </span>
      </div>

      <hr />
      <div>
        <span>上传图片（最多4张）</span>
    
<el-upload
  action="api/consumer-cookbook/hf_uplaod/uploadImage/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-success="loadSuccess"
  >
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
        <div style="margin-top:10px">加个标题</div>
        <el-input placeholder="请输入内容" style="width:50%;margin-top:10px" size="small" v-model="topic.title"></el-input>
      </div>
      <div style="margin-top:10px">
        <div>写话题</div>
        <el-input
          type="textarea"
          :rows="9"
          v-model="topic.contents"
          placeholder="请输入内容"
          style="height:180px;margin-top:10px"
        ></el-input>
      </div>
    </el-col>
    <el-col :span="5">
      <p>发表到小组</p>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio3" size="small">
          <el-radio label="1" border>备选项1</el-radio>
          <el-radio label="2" border>备选项2</el-radio>
        </el-radio-group>
      </div>
      <div style="margin-top:10px">
        <el-button type="danger" @click="submitTopic()">发布话题</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios';
// 引入服务
import { Loading } from 'element-ui';

export default {
  data() {
    return {
      // ruleForm: {
      //   name: "",
      //   password: ""
      // },
      radio3: "3",
      dialogImageUrl: '',
        dialogVisible: false,
      topic:{
        contents: "",
        image: [],
        tid: "",
        title: "",
       user:{
          uid: 0
       }
      },
      image:[]


    }
  },
  methods: {
    submitTopic:function(){
      this.topic.image = this.image
      var url = "api/consumer-index/around_consumer/uploadTopic"
      this.topic.user.uid = this.$store.state.user.uid
      if(this.topic.user.uid !== 0){
        // 上传成功的一次优化
           
          let loadingInstance  = Loading.service({ fullscreen: true ,text: '正在上传'})

          axios.post(url,this.topic).then(res => {
             console.log(res.data)
                loadingInstance.close()
                this.successMessage()
                var _this = this
               setTimeout(function(){
                _this.$router.push("/Hotnews")
               },1000)
          }).catch(err =>{
            this.failsUpload()//上传失败
            this.topic = ''
          })
      }
    },
    loadSuccess(file){
        console.log(file)

        var i = {
          image: file,
          // tid: "string",
          // tmid: 0
        }

        this.image.push(i)
    },
    // 移除
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 预览大图
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      failsUpload() {
        this.$message({
          showClose: true,
          message: '上传失败',
          type: 'error'
        });
      },
       successMessage() {
        this.$message({
          message: '话题上传成功！',
          type: 'success'
        });
      },
  }
};
</script>